﻿<!DOCTYPE html>
<html>
<head>
    <title>CGI</title>
</head>
<body>
    <!--01-->
    <article id="article1" class="my-custom-class">
        <h3>CGI</h3>
        <p>Paragraph 1</p>
        <p class="special">Paragraph 2</p>
        <p class="special">Paragraph 3</p>
    </article>
    <script>
        //var element = document.querySelector('article');
        //# same as by ID
        var element = document.querySelector('#article1');
        console.log(element);
    </script>

    <!--02
    <article id="article1" class="my-custom-class">
        <h3>CGI</h3>
        <p>Paragraph 1</p>
        <p class="special">Paragraph 2</p>
        <p class="special">Paragraph 3</p>
    </article>
    <script>
        //only first P with class special
        var element = document.querySelector('.special');
        console.log(element);
        //all P  with class special
        //var element = document.querySelectorAll('.special');
        //console.log(element);
    </script>-->
</body>
</html>